/**
* Created by icely on 2017/3/15.
*/
<template>
    <div class="foodDetailContainer routerContent">
        <scroller :height="-46+'px'" lock-x ref="scroller">
            <div class="foodDetailContent">
                <img :src="footdetialobj.img">

                <div class="infoBox">
                    <div class="bfcClass">
                        <span class="title floatLeft">{{footdetialobj.name}}</span>
                        <div class="dianzan">
                            <span class="floatRight">{{thumbUpAll}}</span>
                            <img class="floatRight" src="../assets/img/icon-follow-up.png" />
                        </div>

                    </div>
                    <div v-html="footdetialobj.illustrate"></div>
                    <p class="footDetailBorder"></p>
                    <div v-html="footdetialobj.content"></div>
                </div>
            </div>
        </scroller>
        <!-- 固定在底部的 操作box -->
        <div class="operateBox borderTop bfcClass">
            <span class="left">单价：￥<span class="fontXXL">{{total_Money}}</span></span>
            <span v-if="numberRemaining>0" class="right" @click="addcard">加入购物车</span>
            <span v-if="numberRemaining==0" class="right1">已售完</span>
        </div>
        <!--选择口味-->
        <transition name="slide-fade">
            <div class="fodetial" v-show="vtaste" @click="closefoodtaste">
                <div class="chooseStDeal">
                    <p class="chooseHead">
                        <span class="toSwitCity"></span>
                        <span class="taste">{{foodDetialInfo.packageName}}</span>
                        <span class="close" @click="closefoodtaste"></span>
                    </p>
                    <div class="choosetaste">
                        <div>选择口味:</div>
                        <span v-for="(i,index) in taste_li[0].taste" class="tastespan"  :class="{selecttaste_active:tasteIndex== index}" :tasteId="i.tasteId" @click.stop="cTaste(i,index)">{{i.tasteName}}</span>
                    </div>
                    <div class="tasteadd">
                        <div class="tasteaddprice">￥{{foodDetialInfo.price}}</div>
                        <div class="tasteaddin" @click="pushincard">选好了</div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
    import URLParser from '../tools/URLParser'
    import {Group, Cell, Confirm, XHeader, Scroller} from 'vux'
    import {dishesDetailService, shoppingCartService} from '../services/index'

    export default {
        data(){
            return{
                footdetialobj:"",
                stStoreId:"",
                foodDetialInfo:"",
                total_Money:"",
                shopcartInfo:[],
                tasteIndex:0,
                taste_li:[],
                vtaste:false,
                taste_foodcard:[],
                numberRemaining:"",
            }
        },
        components: {
            Group,
            Cell,
            Confirm,
            XHeader,
            Scroller
        },
        mounted(){
            this.$refs.scroller.reset();
        },
        watch: {},
        created(){

        },
        updated(){
            this.$nextTick(() => {
                this.$refs.scroller.reset();
            })
        },
        activated(){
            this.$nextTick(() => {
                this.numberRemaining = window.sessionStorage.getItem("numberRemaining");
                console.log("KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK")
                console.log(this.numberRemaining)
                console.log("KKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKKK")
                this.renderdata();
                this.dishesDetail();
                this.$refs.scroller.reset({top:0});
            })
        },
        deactivated(){
            this.$destroy(true);
        },
        computed: {
            thumbUpAll(){
                if(this.footdetialobj.thumbUp && this.footdetialobj.thumbUp >= 10000){
                    return '9999+'
                }
                return this.footdetialobj.thumbUp;
            }
        },
        methods:{
            closefoodtaste(){
                this.vtaste = false;
            },
            addcard(){

                // this.shopcartInfo.forEach((el)=>{

                //     el.packages.forEach((val)=>{
                //         if(this.numberRemaining == 0) return;
                //         this.vtaste = true;
                //     })
                // });

                /**
                  * John modify
                  * 增加 numberRemaining （库存）字段
                  * 增加 tasteSize （口味种类数量）字段
                  * console.log("当前菜品：" + this.footdetialobj.tasteSize);
                  * console.log("当前菜品库存：" + this.footdetialobj.numberRemaining);
                  */
                if(this.footdetialobj.numberRemaining == 0) return;  

                if(this.footdetialobj.tasteSize > 1 ){
                    this.vtaste = true;
                }else{
                    this.pushincard();                  
                }

            },
            pushincard(){
                this.taste_foodcard = [];
                let tasteid = document.getElementsByClassName("selecttaste_active")[0].getAttribute("tasteid");
                this.shopcartInfo.forEach((el)=>{
                    el.packages.forEach((val)=>{
                        console.log(val.shoppingCartAmount)
                        console.log(this.numberRemaining)
                        if(val.shoppingCartAmount >= this.numberRemaining) return;
                        if(val.packageId == this.foodDetialInfo.packageId && val.price == this.foodDetialInfo.price ){
                            val.taste.forEach((item)=> {
                                if(item.tasteId == tasteid){
                                    item.tasteAmount+=1
                                }
                            })
                        }
                    })
                })

                this.shopcartInfo.forEach((el)=>{
                    el.packages.forEach((val)=>{
                        val.taste.forEach((item)=> {
                            if(item.tasteAmount>0){
                                //加入购物车的数据
                                let sl = {
                                    "packageId":item.packageId,
                                    "packageName":item.packageName,
                                    "amount" : item.tasteAmount,
                                    "menuId" : item.menuId,
                                    "menuName":item.menuName,
                                    "price" : item.price,
                                    "tasteId" : item.tasteId,
                                }
                                this.taste_foodcard.push(sl)
                            }
                        })
                    })
                })

                let param = {
                    storeId:this.stStoreId,
                    packageIds:JSON.stringify(this.taste_foodcard),
                }
                shoppingCartService().save(param).then((res)=> {
                    let dataobj = res.body;
                    if (dataobj && dataobj.code == 200) {
                        this.$router.back();
                    }
                })
            },
            cTaste(el,i){
                this.tasteIndex = i;
            },
            foodtastedata(){
                this.taste_li = [];
                this.shopcartInfo.forEach((el)=>{
                    el.packages.forEach((val)=>{
                        if(val.packageId == this.foodDetialInfo.packageId && val.price == this.foodDetialInfo.price ){
                            if(val.samePackageFlag && val.samePackageFlag == 1){return;}
                            //口味
                            this.taste_li.push(val)
                            console.log(this.taste_li)
                        }
                    })
                })
            },
            renderdata(){
                this.stStoreId = this.$route.query.stStoreId;
                if(this.$route.query.packageIds){
                    this.foodDetialInfo = JSON.parse(this.$route.query.packageIds);
                }
                if(this.$route.query.foodli){
                    this.shopcartInfo = JSON.parse(this.$route.query.foodli);
                }
                console.log(this.shopcartInfo)
                this.foodtastedata();

            },

            dishesDetail(){
                let param = {packageId:this.foodDetialInfo.packageId,menuId:this.foodDetialInfo.menuId,stStoreId : this.$route.query.stStoreId};
                console.log('param------' + JSON.stringify(param))
                dishesDetailService().save(param).then((res) => {
                    let dataobj = res.body;
                    if(dataobj && dataobj.code == 200){
                        this.footdetialobj = dataobj.data;
                        this.total_Money = dataobj.data.price;
                    }else{
                        alert(res.body.msg)
                    }
                    setTimeout( () => {
                        this.$refs.scroller.reset();
                    },1000)

                })
            }
        },
        filters: {

        },
    }
</script>

<style lang="less" rel="stylesheet/less">

    .foodDetailContainer {

        * {
            font-size: 0.8rem;
            line-height: 170%;
        }
        .title {
            font-size: 1rem;
        }
        img {
            width: 100%;
        }
        img.floatRight{
            width: 1rem;
            margin-right: .5rem;
            margin-top: .1rem;
        }

        .infoBox {
            >div{
                padding: 0.8rem 2rem;
            }
        }
        .borderTop {
            border-top: 2px solid rgba(0, 0, 0, 0.1);
        }
        .dianzan{
            overflow: hidden;
        }

        /* 步骤 */
        .stepBox {

            * {
                line-height: 300%;
            }
            span {
                color: rgb(238, 113, 73);
                margin-right: 0.5rem;
            }

        }
        .footDetailBorder{
            background-color: #e7e7e7;
            height: 0.5rem;
            width: 100%;
        }
        /* 底部 固定操作div */
        .routerContent {
            padding-bottom: 2.5rem;
        }
        .operateBox {
            width: 100%;
            height: 2.8rem;
            padding: 0rem 0rem 0rem 2rem;
            background: #ffffff;
            position: fixed;
            left: 0px;
            bottom: 0px;
            font-size: 0px;

            >span {
                line-height: 2.5rem;
                display: inline-block;
                font-size: 0.75rem;
            }
            .left{
                width:70%;
            }
            .right{
                width: 30%;
                text-align: center;
                background-color: #fa5b4b;
                height: 100%;
                line-height: 2.8rem;
                color: #fff;
            }
            .right1{
                width: 30%;
                text-align: center;
                background-color: #a2a2a2;
                height: 100%;
                line-height: 2.8rem;
                color: #fff;
            }
            .fontXXL{
                font-size: 1rem;
            }
        }
        .fodetial {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .5);
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1001;

            .chooseStDeal {
                width: 80%;
                height: 13rem;
                position: absolute;
                top: 50%;
                left: 10%;
                margin-top: -6.5rem;
                background: #fff;
                border-radius: .2rem;
                .chooseHead {
                    border-bottom: 1px solid #fa5b4b;
                    height: 2.2rem;
                    .toSwitCity {
                        font-size: .6rem;
                        width: 20%;
                        height: 2.2rem;
                        line-height: 2.2rem;
                        display: inline-block;
                        text-align: center;
                        color: #999;
                        float: left;
                    }
                    .place {
                        font-size: .8rem;
                        width: 30%;
                        height: 2.2rem;
                        line-height: 2.2rem;
                        text-align: center;
                        display: inline-block;
                        padding-left: 1.2rem;
                        background: url(../assets/img/icon_place.png) no-repeat .2rem center;
                        background-size: .75rem 1rem;
                        margin-left: 1rem;

                    }
                    .taste{
                        font-size: .8rem;
                        width: 60%;
                        height: 2.2rem;
                        line-height: 2.2rem;
                        text-align: center;
                        display: inline-block;
                        background-size: .75rem 1rem;
                    }
                    .close {
                        width: 20%;
                        height: 100%;
                        float: right;
                        display: inline-block;
                        background: url(../assets/img/icon_delect.png) no-repeat 80% center;
                        background-size: .8rem .8rem;
                    }
                }
                .choosetaste{
                    padding: .8rem .8rem 0 .8rem;
                    height: 8rem;
                    div{
                        margin-bottom: 10px;
                        font-size: .8rem;
                    }
                    .tastespan{
                        border:1px solid #fa5b4b;
                        border-radius: 4px;
                        padding: 5px 15px;
                        margin: 0 8px 8px 0;
                        float: left;
                        font-size: .6rem;
                    }
                    .selecttaste_active{
                        background-color: #fa5b4b;
                        color: #ffffff;
                    }
                }
                .tasteadd{
                    height: 2.8rem;
                    background-color: #eee;
                    border-radius: .2rem;
                    position: relative;
                    .tasteaddprice{
                        position: absolute;
                        top:50%;
                        transform: translateY(-50%);
                        left:1rem;
                        color: #fa5b4b;
                    }
                    .tasteaddin{
                        position: absolute;
                        height: 1.8rem;
                        line-height:1.8rem;
                        padding: 0 15px;
                        background-color: #fa5b4b;
                        color: #fff;
                        right: 5%;
                        top: 50%;
                        margin-top: -.9rem;
                        border-radius: .2rem;
                    }
                }
                ul {
                    padding: 0 .5rem;
                    li {
                        text-align: center;
                        height: 2.2rem;
                        width: 100%;
                        line-height: 2.2rem;
                        font-size: .8rem;
                        font-weight: 400;
                        border-bottom: 1px solid #eee;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }

            }
        }
    }

</style>
